<template>
    <div class="addgoods">
        <el-card class="box-card">
            <el-button type="primary" size="large" class="mb10" @click="saveData">保存</el-button>
            <el-collapse v-model="activeNames">
                <el-collapse-item class="p20" title="商品基本信息" name="1">
                    <el-row>
                        <el-col :span="12"> 商品名称:<el-input v-model="form.name" class="short"></el-input> </el-col>
                        <el-col :span="12"> 商品编号:<el-input v-model="form.code" class="short"></el-input> </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <span class="ml25">排序:</span><el-input v-model="form.levelCode" class="short"></el-input>
                        </el-col>
                        <el-col :span="12">
                            <span class="ml">标签名:</span> <el-input v-model="form.tagName" class="short"></el-input>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            商品类型:
                            <el-select v-model="form.categoryType" placeholder="请选择商品类型">
                                <el-option v-for="item in allTypeList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="12">
                            商品品牌:
                            <el-select v-model="form.brandId" placeholder="请选择商品品牌">
                                <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            商品分类:
                            <el-select v-model="form.categoryId" placeholder="请选择商品分类">
                                <el-option v-for="item in catoryList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            支持使用满减卷:
                            <el-select v-model="isCountdown">
                                <el-option v-for="item in countDown" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="12">
                            支持使用粮票:
                            <el-select v-model="isuseSalt">
                                <el-option v-for="item in useSalt" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <span class="ml">支持使用积分:</span>
                            <el-select v-model="score">
                                <el-option v-for="item in countDown" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="12">
                            <span class="ml20">状态:</span>
                            <el-select v-model="statu">
                                <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row> 商品描述:<el-input v-model="form.desoribe" class="descript"></el-input> </el-row>
                    <el-row>
                        <el-col :span="12"> <span>商品详情图:</span> <img class="introduction" :src="form.introduction" alt="" /></el-col>
                        <el-col :span="12"> <span>缩略图:</span> <img class="introduction" :src="form.thumbnail" alt="" /> </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="规格信息" name="2">
                    <el-table :data="form.standardlist" style="width: 100%" border stripe>
                        <el-table-column prop="name" label="规格名称" width="180" align="center"> </el-table-column>
                        <el-table-column prop="warehouseID" label="所属仓库" width="180" align="center"> </el-table-column>
                        <el-table-column prop="level" label="排序" align="center" width="48"> </el-table-column>
                        <el-table-column prop="marketPrice" label="市场价" width="80" align="center"> </el-table-column>
                        <el-table-column prop="retailPrice" label="零售价" width="65" align="center"> </el-table-column>
                        <el-table-column prop="maxScore" label="可使用积分数" align="center" width="93"> </el-table-column>
                        <el-table-column prop="isVip" label="是否启用VIP价" width="105" align="center">
                            <template slot-scope="scope">
                                <el-checkbox :value="scope.row.isVip ? true : false"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column prop="vipPrice" label="VIP价" width="77" align="center"> </el-table-column>
                        <el-table-column prop="svipPrice" label="SVIP价" align="center" width="97"></el-table-column>
                        <el-table-column prop="isShop" label="是否启用店主价" width="111" align="center">
                            <template slot-scope="scope">
                                <el-checkbox :value="scope.row.isShop ? true : false"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column prop="shopPrice" label="店主价" width="77" align="center"> </el-table-column>
                        <el-table-column prop="address" label="操作" align="center" width="182">
                            <template>
                                <el-button type="primary" size="mini" @click="checkDetil">查看详情</el-button>
                                <el-button type="primary" size="mini" @click="delePro">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
                <el-collapse-item title="商品轮播图信息" name="3">
                    <el-table :data="form.resourcelist" style="width: 100%" border stripe>
                        <el-table-column prop="name" label="图片" align="center"> </el-table-column>
                        <el-table-column prop="address" label="操作" align="center">
                            <el-button type="primary" @click="delePro">删除</el-button>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
            </el-collapse>
        </el-card>
    </div>
</template>

<script>
import { editProDetil, getProDetailList, getBrandsList, getcatoryList, getalltype } from '@/api/goods.js'
export default {
  name: 'editgoods',
  data () {
    return {
      activeNames: ['1'],
      tableData: [],
      brandList: [],
      // 所有商品分类项
      catoryList: [],
      allTypeList: [],
      goodsId: this.$route.params.role,
      editDialogVisible: false,
      isCountdown: null,
      score: null,
      isuseSalt: null,
      statu: null,
      form: {},
      countDown: [
        {
          label: '支持',
          value: true
        },
        {
          label: '不支持',
          value: false
        }
      ],
      useSalt: [
        {
          label: '支持',
          value: true
        },
        {
          label: '不支持',
          value: false
        }
      ],
      useScore: [
        {
          label: '支持',
          value: true
        },
        {
          label: '不支持',
          value: false
        }
      ],
      status: [
        {
          label: '上架',
          value: true
        },
        {
          label: '下架',
          value: false
        }
      ]
    }
  },
  created () {
    // this.getProDeatil()
    this.getBrandsList()
    this.getallcatoryList()
    this.getAllType()
  },
  activated () {
    this.goodsId = this.$route.params.role
    this.getProDeatil()
  },
  mounted () {

  },
  methods: {
    async saveData () {
      const form = this.form
      const params = {
        id: form.id,
        name: form.name,
        code: form.code,
        levelCode: form.levelCode,
        tagName: form.tagName,
        desoribe: form.desoribe,
        categoryType: form.categoryType,
        brandId: form.brandId,
        categoryId: form.categoryId,
        thumbnail: form.thumbnail,
        isUseFullReduction: this.isCountdown,
        isUseSalt: this.isuseSalt,
        isUseScore: this.score,
        status: this.statu,
        introduction: form.introduction,
        standardlist: form.standardlist,
        resourcelist: form.resourcelist
      }
      const { Data } = await editProDetil(params)
      console.log(Data)
      this.$router.push('/commodityList')
      this.getallcatoryList()
    },
    // 获取商品详细信息
    async getProDeatil () {
      const { Data } = await getProDetailList({
        id: this.goodsId
      })
      console.log(Data)
      this.form = Data
      this.isCountdown = Data.isUseFullReduction
      this.isuseSalt = Data.isUseSalt
      this.score = Data.isUseScore
      this.statu = Data.status
      //   console.log(this.isCountdown, this.isuseSalt, this.score, this.statu)
      console.log(Data)
    },

    // 获取所有品牌种类
    async getBrandsList () {
      const { Data } = await getBrandsList({
        pageIndex: 1,
        pageSize: 20,
        name: null
      })
      console.log(Data)
      this.brandList = Data.list
    },

    // 获取所有商品分类
    async getallcatoryList () {
      const { Data } = await getcatoryList()
      console.log(Data)
      this.catoryList = Data.list
    },

    // 获取所有商品类型
    async getAllType () {
      const { Data } = await getalltype()
      console.log(Data)
      this.allTypeList = Data.dictList
      // this.catoryList = Data.list
    },

    checkDetil () {

    },
    delePro () {

    }

  }
}
</script>

<style scoped>
.descript {
    width: 800px;
}

.el-row {
    margin-bottom: 20px;
    padding: 0 30px;
}

.short {
    width: 350px;
}

.ml25 {
    margin-left: 25px;
}

.ml {
    margin-left: 13px;
}

.el-input,
.el-select {
    margin-left: 10px;
}

.ml20 {
    margin-left: 55px;
}

.mb10 {
    margin-bottom: 10px;
}

.introduction {
    width: 100px;
    height: 100px;
}
</style>
